<template>
    <view class="register-container">
        <form class="register-form">
            <h2>注册页面</h2>
            <input type="text" placeholder="请输入账号" v-model="param.username">
            <input type="password" placeholder="请输入密码" v-model="param.password">
            <input type="password" placeholder="请确认密码" v-model="confirmPassword">
            <button type="submit" @click="register">注册账号</button>
            <p style="margin-top: 20rpx;">有账号? <text class="link" @click="goToLogin">点击登录</text></p>
        </form>
    </view>
</template>

<script>
import { userRegister } from '../../api/user/index.js'
export default {
    data() {
        return {
			confirmPassword: '',
            param: {
                username: '',
                password: ''
            }
        };
    },
    methods: {
        register() {
            console.log(this.param);
            if (this.param.password == "" || this.confirmPassword == "" || this.param.username == "" ) {
                uni.showToast({
                    title: '账号密码不能为空!',
                    //将值设置为 success 或者直接不用写icon这个参数
                    icon: 'error',
                    //显示持续时间为 2秒
                    duration: 2000
                })
                return
            }
            if (this.param.password != this.confirmPassword) {
                uni.showToast({
                    title: '输入密码不一致!',
                    //将值设置为 success 或者直接不用写icon这个参数
                    icon: 'error',
                    //显示持续时间为 2秒
                    duration: 2000
                })
                return
            }
			userRegister(this.param).then( res => {
				console.log(res)
				if(res.code == 200){
					uni.showToast({
					    title: '注册成功',
					    //将值设置为 success 或者直接不用写icon这个参数
					    icon: 'success',
					    //显示持续时间为 2秒
					    duration: 2000
					})
					uni.redirectTo({
					    url: '/pages/login/index'
					});
				} else {
					uni.showToast({
					    title: res.message,
					    //将值设置为 success 或者直接不用写icon这个参数
					    icon: 'error',
					    //显示持续时间为 2秒
					    duration: 2000
					})
				}
			})
            
        },
        goToLogin() {
            uni.redirectTo({
                url: '/pages/login/index'
            });
        }
    }
}
</script>

<style scoped>
.register-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    position: relative;
    background-image:linear-gradient(0deg,#d5dee7 0%, #ffafbd 0%, #c9ffbf 100%);
}


.register-form {
    text-align: center;
    background-color: rgba(255, 255, 255, 0.3);
    padding: 20px 50px;
    border-radius: 10px;
    width: 55%;
}

.register-form h2 {
    margin-bottom: 20px;
}

.register-form input {
    width: 90%;
    padding: 10px 10px;
    margin-bottom: 10px;
    border-radius: 10px;
    border: 1px solid rgb(185, 185, 185);
}

.register-form button {
    background-color: #FF9800;
    color: #fff;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    width: 50%;
}

.link {
    color: #007bff;
    cursor: pointer;
}
</style>